<template>
  <div class="container">
    <el-dialog title="新增文章" :visible.sync="showDialog" @close="btnCancel">
      <el-row :gutter="15">
        <el-form
          ref="addfrom"
          :model="addfromData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="17">
            <el-form-item label="文章标题" prop="title">
              <el-input
                v-model="addfromData.title"
                placeholder="请输入文章标题"
                clearable
                :style="{ width: '140%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="文章内容" prop="articleBody">
               <quill-editor
                :options="editorOption"
                v-model="addfromData.articleBody"
                placeholder="请输入文章内容"
                :style="{ width: '140%', height: '120px' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="17" class="video">
            <el-form-item label="视频地址">
              <el-input
                v-model="addfromData.videoURL"
                placeholder="请输入视频地址"
                clearable
                :style="{ width: '140%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="btnOk" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add } from "../../api/hmmm/articles";
export default {
  name:'articlesAdd',
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // Editor富文本输入框配置
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            [{ list: "ordered" }, { list: "bullet" }], //列表
            ["blockquote", "code-block", "image", "link"],
          ],
        },
        placeholder: "",
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入文章标题",
            trigger: "blur",
          },
          {
            min: 1,
            max: 100,
            message: "文章标题长度为1-50个字符",
            trigger: "blur",
          },
        ],
        articleBody: [
          {
            required: true,
            message: "请输入文章内容",
            trigger: "blur",
          },
        ],
      },
      addfromData: {
        title: "", //标题
        articleBody: "", //文章正文
        videoURL: "", //视频地址
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async btnOk() {
      //校验表单
      try {
        await this.$refs.addfrom.validate();
        //校验成功  调用新接口
        await add(this.addfromData);
        //通知父组件  更新数据   this.$parent 父组件的实例
        this.$parent.list && this.$parent.list(); //直接调用父组件的更新方法
        this.$parent.showDialog = false;
      } catch (error) {
        console.log(error);
      }
    },
    btnCancel() {
      this.addfromData = {
        title: "",
        articleBody: "",
        videoURL: "",
      };
      this.$refs.addfrom.resetFields(); //移除之前的校验
      this.$emit("update:showDialog", false);
    },
  },
};
</script>
<style>
.video {
  margin-top: 60px;
}
</style>
